<template>
  <div class="setting-card-wrapper">
    <div v-if="title" class="title">
      {{ title }}
    </div>
    <div class="setting-card" :style="style">
      <slot></slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useThemeStore } from "@/stores/theme"

defineProps({
  title: {
    type: String,
    required: false
  }
})

const themeStore = useThemeStore()

const style = themeStore.getThemeType(
  { "--setting-card-wrapper-background": "#555" },
  { "--setting-card-wrapper-background": "#f1f1f1" }
)
</script>

<style scoped lang="scss">
.setting-card-wrapper {
  margin-top: 0.15rem;

  .title {
    font-weight: bolder;
    padding-left: 0.1rem;
  }

  .setting-card {
    background: var(--setting-card-wrapper-background);
    padding: 0 0.1rem;
    border-radius: 0.05rem;
    margin-top: 0.05rem;
  }
}
</style>
